<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>技术栈</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="stylesheet" href="/view/tags/footer.css">
    <link rel="stylesheet" href="/view/tags/nav.css">
    <script  src="/view/tags/nav.js" defer></script>

    <link rel="stylesheet" href="/res/css/tech_stack.css">
    <script type="module" src="/res/js/tech_stack.js"></script>
</head>

<body>
    <div class="navigation">
    </div>
    <div class="top-section">
       
        <div class="top-background">
            <div class="top-sign-0">技术栈</div>
            <div class="top-sign-1">学习与分享的乐趣</div>
        </div>
    </div>

    <div class="main-content">
        <div class="content-container">
            <!-- 搜索框区域 -->
            <div class="search-section">
                <div class="search-container">
                    <input type="text" class="search-input" placeholder="搜索文章...">
                    <button class="search-button">搜索</button>
                </div>
            </div>
            
            <!-- 标签区域 - 两行布局 -->
            <div class="tags-section">
                <!-- 第一行：标签 -->
                <div class="tags-container">
                    <span class="tag active">全部</span>
                    <span class="tag">数学</span>
                    <span class="tag">编程</span>
                    <span class="tag">生活</span>
                    <span class="tag">前端</span>
                    <span class="tag">后端</span>
                    <span class="tag">人工智能</span>
                    <span class="tag">机器学习</span>
                    <span class="tag">数据结构</span>
                    <span class="tag">计算机网络</span>
                </div>
                
            </div>

            <!-- 博客列表区域 -->
            <div class="blog-list">
                <ul>
                    <li>
                        <span class="blog-title">JavaScript异步编程详解</span>
                        <span class="blog-subtitle">从回调到Async/Await的完整指南</span>
                        <span class="blog-introduce">
                            <img class="calendar" src="./res/media/svg/sys/calendar.svg" alt="logo">
                            <span class="blog-date">2025-02-15</span>
                            <div class="blog-tags-container">
                                <span class="blog-tag">#前端</span>
                            </div>
                        </span>
                        <span class="blog-summary">深入探讨JavaScript中的异步编程模式，包括回调函数、Promise、async/await等内容，帮助你更好地理解JavaScript的异步特性。</span>
                    </li>
                    <li>
                        <span class="blog-title">数据结构：红黑树原理与实现</span>
                        <span class="blog-subtitle">平衡二叉查找树的高级应用</span>
                        <span class="blog-introduce">
                            <img class="calendar" src="./res/media/svg/sys/calendar.svg" alt="logo">
                            <span class="blog-date">2025-02-10</span>
                            <div class="blog-tags-container">
                                <span class="blog-tag">#数据结构</span>
                            </div>
                        </span>
                        <span class="blog-summary">详细讲解红黑树的基本原理、性质以及在各种编程语言中的实现方式，并分析其在实际应用中的优势。</span>
                    </li>
                    <li>
                        <span class="blog-title">机器学习入门：线性回归模型</span>
                        <span class="blog-subtitle">从理论到实践的完整教程</span>
                        <span class="blog-introduce">
                            <img class="calendar" src="./res/media/svg/sys/calendar.svg" alt="logo">
                            <span class="blog-date">2025-02-05</span>
                            <div class="blog-tags-container">
                                <span class="blog-tag">#机器学习</span>
                            </div>
                        </span>
                        <span class="blog-summary">从零开始学习机器学习中最基础的线性回归模型，包括原理解析、代码实现以及实际应用案例分析。</span>
                    </li>
                </ul>

                <div class="pagination">
                    <button class="pagination-button prev-button" title="上一页">&lt;</button>
                    <div class="page-numbers">
                        <a href="#" class="page-number active">1</a>
                        <a href="#" class="page-number">2</a>
                        <a href="#" class="page-number">3</a>
                    </div>
                    <button class="pagination-button next-button" title="下一页">&gt;</button>
                    <div class="goto-container">
                        <span class="goto-text">Go to</span>
                        <input type="text" class="page-input" value="1">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="footer"></div>
    <script>
        (async () => {
            const response = await fetch('/view/tags/footer.html');
            const data = await response.text();
            document.getElementById('footer').innerHTML = data;
        })();
    </script>

    
</body>
</html>